<div class="pac-auth-card flex flex-col justify-start items-center pb-2 m-auto rounded-xl shadow-lg dark:border dark:border-neutral-800">
  <div class="pac-auth__header my-8">
    <img class="pac-auth__logo w-10 h-10 rounded-xl mr-2" src="assets/logo.png" />
    <span>
      {{ title() || ('Auth.AppName' | translate: { Default: 'Xpert AI Cloud' }) }}
    </span>
  </div>
    
  <router-outlet></router-outlet>

  <div class="flex justify-between items-center gap-2">

    <select
      id="countries"
      class="text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
      [ngModel]="language()"
      (ngModelChange)="onLanguage($event)"
    >
      <option value="en">English</option>
      <option value="zh-Hans">中文简体</option>
      <option value="zh-Hant">中文繁体</option>
    </select>

    <div class="pac-auth__copyright flex-1 flex items-center whitespace-pre">
      {{ 'Auth.Copyright' | translate: { Default: 'Copyright' } }}
      <mat-icon class="text-neutral-500">copyright</mat-icon>
      2025 <a href="https://mtda.cloud" target="_blank">Xpert.AI</a> Inc.
    </div>
  </div>
</div>